<template>
  <XnDialog
    :visible.sync="selfVisible"
    title="用户延期申请"
    custom-class="user-delay-dialog"
    top="20vh"
    @close="closeDialog">
    <el-form ref="delayForm" size="small" label-position="top">
      <el-form-item :label="'时间延期到： ' + expireTime">
        <el-radio-group v-model="radioType">
          <el-radio label="week">一周后</el-radio>
          <el-radio label="month">一个月后</el-radio>
          <el-radio label="year">一年后</el-radio>
          <el-radio label="other">
            其他
            <el-date-picker
              v-if="radioType === 'other'"
              v-model="otherTime"
              size="mini"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width: 140px"
              :picker-options="pickerOptions"
              :clearable="false"
              @change="onDateChange"></el-date-picker>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="btn-box">
        <el-button size="small" @click.stop="closeDialog">取消</el-button>
        <el-button size="small" type="primary" @click.stop="onModelSubmit">确定</el-button>
      </div>
    </el-form>
  </XnDialog>
</template>
<script>
import XnDialog from '@com/xnDialog.vue'
import { formatDate } from '@utility/utility'
export default {
  name: 'DelayDialog',
  components: { XnDialog },
  emits: ['submit'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      selfVisible: false,
      radioType: 'week',
      expireTime: '',
      otherTime: '',
      pickerOptions: {
        disabledDate: time => this.setDisabledDate(time),
      },
    }
  },
  watch: {
    visible(bool) {
      this.selfVisible = bool
      if (bool) {
        this.getDelayDate()
      }
    },
    radioType() {
      this.getDelayDate()
    },
  },
  created() {
    const date = new Date()
    this.otherTime = formatDate(date.setDate(date.getDate() + 1))
  },
  methods: {
    setDisabledDate(time) {
      return time.getTime() < Date.now()
    },
    closeDialog() {
      this.radioType = 'week'
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    getDelayDate() {
      const date = new Date()
      if (this.radioType === 'other') {
        this.expireTime = formatDate(this.otherTime, 'yyyy-MM-dd')
      } else {
        if (this.radioType === 'week') {
          date.setDate(date.getDate() + 7)
        } else if (this.radioType === 'month') {
          date.setMonth(date.getMonth() + 1)
        } else if (this.radioType === 'year') {
          date.setFullYear(date.getFullYear() + 1)
        }
        this.expireTime = formatDate(date, 'yyyy-MM-dd')
      }
    },
    onDateChange(date) {
      this.expireTime = date
    },
    onModelSubmit() {
      if (!this.expireTime) {
        return false
      }
      this.$emit('submit', this.expireTime)
    },
  },
}
</script>
<style lang="scss" scoped>
.user-delay-dialog {
  ::v-deep &.el-dialog {
    width: 600px;
    .el-dialog__body {
      padding: 20px 40px !important;
    }
    .el-form {
      .el-form-item {
        position: relative;
        .expire-time {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .el-input,
      .el-select {
        width: 100%;
      }
      .btn-box {
        text-align: right;
        margin-top: 20px;
        border-top: 1px solid #dedede;
        padding-top: 20px;
      }
      .el-radio-group {
        margin-top: 10px;
        .el-radio {
          margin-bottom: 20px;
        }
        .el-date-editor {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
